<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box" id="hezi">啊啊啊啊啊啊</div>
    <!-- <div class="box">222222</div>
    <ul>
        <li>1111111</li>
    </ul>
    <ol>
        <li>2222222</li>
    </ol> -->
</body>

</html>
<script>
    //一.html标签：元素对象。
    // 1.获取元素对象。
    // alert(hezi); //[object HTMLDivElement]
    // console.log(hezi); //<div class="box" id="hezi">123456</div>
    // document.querySelector(css选择器):获取单个(第一个)元素对象。
    // alert(hezi);//[object HTMLDivElement]
    // alert(document.querySelector('.box'));//[object HTMLDivElement]
    // console.log(document.querySelector('ul li'));

    // 2.innerHTML:属性，获取和设置元素对象里面的内容。解析html标签，渲染的核心的属性。
    // 获取
    // alert(hezi.innerHTML);
    // alert(document.querySelector('.box').innerHTML);
    // 设置
    // hezi.innerHTML = 'hehehehehe';
    // document.querySelector('.box').innerHTML = '呵呵呵呵呵';
    // hezi.innerHTML = '<em contenteditable="true">hehehehehe</em>';
</script>